﻿<Infrastructure:VisualStateAwarePage x:Name="pageRoot"
                                     x:Class="AdventureWorks.Shopper.Views.CategoryPage"
                                     IsTabStop="false"
                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                     xmlns:behaviors="using:AdventureWorks.Shopper.Behaviors"
                                     xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:core="using:Microsoft.Xaml.Interactions.Core" 
                                     xmlns:views="using:AdventureWorks.Shopper.Views"
                                     xmlns:controls="using:AdventureWorks.Shopper.Controls"
                                     xmlns:designViewModels="using:AdventureWorks.Shopper.DesignViewModels"
                                     xmlns:Infrastructure="using:Microsoft.Practices.Prism.StoreApps"
                                     mc:Ignorable="d"
                                     x:Uid="Page"
                                     Infrastructure:ViewModelLocator.AutoWireViewModel="true"
                                     d:DataContext="{d:DesignInstance designViewModels:HubPageDesignViewModel, IsDesignTimeCreatable=True}">
    <Page.Resources>
        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource x:Name="groupedItemsViewSource"
                              Source="{Binding Path=Subcategories}"
                              d:DesignSource="{Binding RootCategories, Source={d:DesignInstance designViewModels:HubPageDesignViewModel, IsDesignTimeCreatable=True}}"
                              IsSourceGrouped="true"
                              ItemsPath="Products" />
    </Page.Resources>

    <Page.TopAppBar>
        <AppBar Style="{StaticResource AppBarStyle}"
                x:Uid="TopAppBar">
            <views:TopAppBarUserControl />
        </AppBar>
    </Page.TopAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    AutomationProperties.AutomationId="CategoryPageGoBackButton"
                    Command="{Binding GoBackCommand, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Text="{Binding Title}"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1" />
            <views:SearchUserControl x:Name="searchUserControl"
                                     Grid.Column="2"
                                     Margin="15,15,0,15" />
            <views:ShoppingCartTabUserControl x:Name="shoppingCartTabUserControl"
                                              Grid.Column="3"
                                              RenderTransformOrigin="0.5,0.5"
                                              Margin="15"
                                              Loaded="StartLayoutUpdates"
                                              Unloaded="StopLayoutUpdates">
                <views:ShoppingCartTabUserControl.RenderTransform>
                    <CompositeTransform />
                </views:ShoppingCartTabUserControl.RenderTransform>
            </views:ShoppingCartTabUserControl>
        </Grid>

        <SemanticZoom Grid.Row="1"
                      x:Name="semanticZoom">
            <SemanticZoom.ZoomedOutView>
                <GridView Padding="120,0,0,0"
                          Foreground="White"
                          AutomationProperties.AutomationId="CategoryPageGridView"
                          ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                          ItemTemplate="{StaticResource AWShopperItemTemplateSemanticZoom}">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid ItemWidth="250"
                                      ItemHeight="250"
                                      MaximumRowsOrColumns="2"
                                      VerticalChildrenAlignment="Center" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>

            </SemanticZoom.ZoomedOutView>

            <SemanticZoom.ZoomedInView>
                <!-- Horizontal scrolling grid used in most view states -->
                <controls:MultipleSizedGridView x:Name="itemsGridView"
                                                AutomationProperties.AutomationId="HubPageItemGridView"
                                                AutomationProperties.Name="Grouped Items"
                                                Margin="0,0,0,0"
                                                Padding="120,0,40,46"
                                                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                                                ItemTemplate="{StaticResource AWShopperItemTemplate}"
                                                MinimalItemTemplate="{StaticResource ProductTemplateMinimal}"
                                                SelectionMode="None"
                                                ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                                                IsItemClickEnabled="True">
                    <interactivity:Interaction.Behaviors>
                        <core:EventTriggerBehavior EventName="ItemClick">
                            <behaviors:NavigateWithEventArgsToPageAction TargetPage="AdventureWorks.Shopper.Views.ItemDetailPage" EventArgsParameterPath="ClickedItem.ProductNumber"/>
                        </core:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                    <controls:MultipleSizedGridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </controls:MultipleSizedGridView.ItemsPanel>
                    <controls:MultipleSizedGridView.PortraitItemsPanel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </controls:MultipleSizedGridView.PortraitItemsPanel>
                    <controls:MultipleSizedGridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Button AutomationProperties.Name="{Binding Title}"
                                            Foreground="{StaticResource AWShopperAccentTextBrush}"
                                            Style="{StaticResource TextPrimaryButtonStyle}"
                                            Command="{Binding CategoryNavigationCommand}"
                                            Margin="5,0,0,10">
                                        <Button.Content>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}"
                                                           Style="{StaticResource GroupHeaderTextStyle}" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}"
                                                           Style="{StaticResource GroupHeaderTextStyle}"
                                                           FontFamily="{StaticResource SymbolThemeFontFamily}"
                                                           Margin="10,0" />
                                            </StackPanel>
                                        </Button.Content>
                                    </Button>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid ItemWidth="250"
                                                           ItemHeight="250"
                                                           Orientation="Vertical"
                                                           Margin="0,0,80,0" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </controls:MultipleSizedGridView.GroupStyle>
                    <controls:MultipleSizedGridView.PortraitGroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Button AutomationProperties.Name="{Binding Title}"
                                            Foreground="{StaticResource AWShopperAccentTextBrush}"
                                            Style="{StaticResource TextPrimaryButtonStyle}"
                                            Command="{Binding CategoryNavigationCommand}"
                                            Margin="5,0,0,10">
                                        <Button.Content>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}"
                                                           Style="{StaticResource GroupHeaderTextStyle}" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}"
                                                           Style="{StaticResource GroupHeaderTextStyle}"
                                                           FontFamily="{StaticResource SymbolThemeFontFamily}"
                                                           Margin="10,0" />
                                            </StackPanel>
                                        </Button.Content>
                                    </Button>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid ItemWidth="250"
                                        ItemHeight="250"
                                        Orientation="Horizontal"
                                        Margin="0,0,0,20" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </controls:MultipleSizedGridView.PortraitGroupStyle>
                    <controls:MultipleSizedGridView.MinimalGroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Button AutomationProperties.Name="Group Title"
                                    Foreground="{StaticResource AWShopperAccentTextBrush}"
                                    Style="{StaticResource TextPrimaryButtonStyle}"
                                    Command="{Binding CategoryNavigationCommand}"
                                    Margin="10,10,0,10">
                                        <Button.Content>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}"
                                                   Style="{StaticResource GroupHeaderTextStyle}" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}"
                                                   Style="{StaticResource GroupHeaderTextStyle}"
                                                   FontFamily="{StaticResource SymbolThemeFontFamily}"
                                                   Margin="10,0" />
                                            </StackPanel>
                                        </Button.Content>
                                    </Button>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </controls:MultipleSizedGridView.MinimalGroupStyle>
                </controls:MultipleSizedGridView>
            </SemanticZoom.ZoomedInView>

        </SemanticZoom>

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="DefaultLayout" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="PortraitLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView"
                                                       Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="40,0,0,30" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="CanChangeViews">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="false" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="IsZoomOutButtonEnabled">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="false" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when in minimal layout, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="MinimalLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemsGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="20,0,10,0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource MinimalPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="CanChangeViews">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="false" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="IsZoomOutButtonEnabled">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="false" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
                                                       Storyboard.TargetName="shoppingCartTabUserControl">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0,37,-20,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="searchUserControl">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Infrastructure:VisualStateAwarePage>
